<h3 class="devui-h3-title">Default</h3>
<d-operable-tree
  [tree]="data"
  [treeNodeIdKey]="'id'"
  [treeNodeChildrenKey]="'children'"
  [checkable]="false"
  [draggable]="true"
  (nodeOnDrop)="onDrop($event)"
  [beforeNodeDrop]="beforeNodeDrop"
  (nodeToggled)="showNode($event)"
>
</d-operable-tree>
<h3 class="devui-h3-title">Sortable</h3>
<d-operable-tree
  [tree]="data"
  [treeNodeIdKey]="'id'"
  [treeNodeChildrenKey]="'children'"
  [checkable]="false"
  [draggable]="true"
  [dropType]="dropType"
  (nodeOnDrop)="onDrop($event)"
  [beforeNodeDrop]="beforeNodeDrop"
  (nodeToggled)="showNode($event)"
>
</d-operable-tree>

<div class="drop-area" (dragover)="dragOver($event)" (drop)="drop($event)">
  <div class="drop-item" *ngFor="let item of dropItems">
    <span>{{ item }}</span>
  </div>
</div>
